<!DOCTYPE html>
<html>
	<head>
		<title>Demo</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
		<meta charset="utf-8" />
	</head>
	<link rel="stylesheet" type="text/css" href="asse.css">
	<body>

		<div class="a-card">
			<div class="a-card-title">
				<div class="a-verline"></div>
				<div>按钮组</div>
			</div>
			<div class="a-card-body">
				<div class="a-btn">按钮</div>
				<div class="a-btn a-btn-white">按钮</div>
				<div class="a-btn a-btn-blue">按钮</div>
				<div class="a-btn a-btn-yellow">按钮</div>
				<div class="a-btn a-btn-orange">按钮</div>
				<div class="a-btn a-btn-disable">按钮</div>
				<div class="a-btn a-btn-cicle a-btn-blue">圆</div>
				<div class="a-hr"></div>
				<div class="a-btn a-btn-blue a-btn-mini">按钮</div>
				<div class="a-btn a-btn-blue a-btn-small">按钮</div>
				<div class="a-btn a-btn-blue">按钮</div>
				<div class="a-btn a-btn-blue a-btn-large">按钮</div>
			</div>
		</div>

		<div class="a-card">
			<div class="a-card-title">
				<div class="a-verline" style="background-color:  #9F8BEC;"></div>
				<div>面板</div>
			</div>
			<div class="a-card-body">
				<div class="a-panel-left" style="background: #eee;height: 50px;">
					<div class="x-CenterCon">左侧面板</div>
				</div>
				<div class="a-panel-right" style="background: #eee;height: 50px;">
					<div class="x-CenterCon">右侧面板</div>
				</div>
				<hr class="a-hr">
				<div class="a-panel" style="background: #eee;height: 60px;">
					<div class="x-CenterCon">单独面板</div>
				</div>
			</div>
		</div>

		<div class="a-card">
			<div class="a-card-title">
				<div class="a-verline" style="background-color: #FF6347;"></div>
				<div>表格</div>
			</div>
			<div class="a-card-body">
				<table class="a-table">
					<thead>
						<tr>
							<th>Id</th>
							<th>Name</th>
							<th>Birth</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>1</td>
							<td>John</td>
							<td>2019-01-01</td>
						</tr>
						<tr>
							<td>2</td>
							<td>Amy</td>
							<td>2019-04-03</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>

		<div class="a-card">
			<div class="a-card-title">
				<div class="a-verline" style="background-color: #3CB371;"></div>
				<div>输入框</div>
			</div>
			<div class="a-card-body">
				<div class="y-center" style="flex-direction: column;">
					<div class="y-center">
						<input class="a-input" placeholder="请输入" />
					</div>
					<div class="y-center">
						<div class="a-label">账号：</div>
						<input class="a-input" placeholder="请输入" />
					</div>
					<div class="a-input-con-line">
						<div class="a-label">账号:</div>
						<input class="a-input" placeholder="请输入" />
					</div>
					<div class="a-input-con">
						<div class="a-label">账号:</div>
						<input class="a-input" placeholder="请输入" />
					</div>

				</div>
			</div>
		</div>
	</body>
</html>
